<template>
  <div class='content'>
    <div id="text-graph">
      <div ref='forceChart' style='width:50%;height:800px'></div>
      <div ref='treeChart' style='width:50%;height:800px'></div>
    </div>
    <div id="similar-empty" v-on:click="emptyJump" class="text-empty-box">
      <el-empty description="该病历无相似病历，请重新选择"></el-empty>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
export default {
  name: 'CaseTextGraph',
  data () {
    return {
      categories: [
        {name: '患者'},
        {name: '属性'},
        {name: '其他'}
      ],
      links: [],
      patientAttrs: [],
      correspondence: {
        age: {
          attrs: '年龄',
          id: 1
        },
        height: {
          attrs: '身高',
          id: 2
        },
        id: {
          attrs: '病历编号',
          id: 3
        },
        married: {
          attrs: '是否结婚',
          id: 4
        },
        name: {
          attrs: '姓名',
          id: 5
        },
        nation: {
          attrs: '国家',
          id: 6
        },
        sex: {
          attrs: '性别',
          id: 7
        },
        weight: {
          attrs: '体重',
          id: 8
        }
      },
      cirData: [],
      patientId: ''
    }
  },
  mounted () {
    this.patientId = Vue.prototype.GLOBAL.tgCaseId
    let empty = document.getElementById('similar-empty')
    let chart = document.getElementById('text-graph')
    if (this.patientId !== '') {
      this.getPatient(this.patientId)
      this.getPatientTags(this.patientId)
      empty.style.display = 'none'
      chart.style.display = 'flex'
    } else {
      empty.style.display = 'block'
      chart.style.display = 'none'
    }
    // this.getEchartData()
    // this.getCirData()
  },
  methods: {
    getPatient (id) {
      var _this = this
      this.$axios
        .get('/patient', {
          params: {
            patientId: id
          }
        })
        .then(
          successResponse => {
            let patientInfo = successResponse.data.data[0]
            for (let key in patientInfo) {
              let patientAttr = {
                category: key === 'name' ? 0 : 1,
                symbolSize: key === 'name' ? 90 : 50,
                name: key === 'married' ? (patientInfo[key] === true ? '已婚' : '未婚') : patientInfo[key],
                value: key === 'name' ? 90 : 50,
                id: _this.correspondence[key].id
              }
              _this.patientAttrs.push(patientAttr)
            }
            const nameIndex = _this.patientAttrs.findIndex(obj => obj.id === _this.correspondence['name'].id)
            for (let key in patientInfo) {
              const otherIndex = _this.patientAttrs.findIndex(obj => obj.id === _this.correspondence[key].id)
              if (key === 'name') {
              } else {
                let link = {
                  source: nameIndex,
                  target: otherIndex,
                  label: {
                    normal: {
                      show: true,
                      formatter: _this.correspondence[key].attrs
                    }
                  }
                }
                _this.links.push(link)
              }
            }
            _this.getEchartData()
          }
        )
        .catch(
          failResponse => {
            console.log(failResponse.msg)
          }
        )
    },
    getEchartData () {
      const chart = this.$refs.forceChart
      if (chart) {
        const myChart = this.$echarts.init(chart)
        const option = {
          title: {
            // 主标题
            text: '患者',
            // 副标题
            subtext: '患者基本信息力导图',
            // 位置
            top: 'top',
            left: 'left'
          },
          // 提示框设置
          tooltip: {
            // 关闭提示框
            show: false
          },
          // 图例设置
          legend: [{
            // 纵向
            orient: 'vertical',
            // 位置
            left: 'right',
            // 图例内容，由上面的分类集合决定
            data: this.categories.map(function (a) {
              return a.name
            })
          }],
          // 数据设置
          series: [{
            // 类型
            type: 'graph',
            // 力导图布局
            layout: 'force',
            // 开启平移与缩放
            roam: true,
            // 标签设置
            label: {
              normal: {
                // 是否展示
                show: true,
                // 展示位置
                position: 'top',
                // 展示内容
                // formatter: '{b}',
                // 文本设置
                textStyle: {
                  // 文本大小
                  fontSize: '16px'
                }
              }
            },
            lineStyle: {
              color: 'source'
              // curveness: 0.3
            },
            // 根据value放缩节点
            symbolSize: (value, params) => {
              return value
            },
            // 是否可拖拽
            draggable: true,
            // 节点数据
            data: this.patientAttrs,
            // 分类
            categories: this.categories,
            force: {
              edgeLength: 200,
              repulsion: 300
              // gravity: 0.1
            },
            // 关系
            links: this.links
          }]
        }
        myChart.setOption(option)
        window.addEventListener('resize', function () {
          myChart.resize()
        })
        this.$on('hook:destroyed', () => {
          window.removeEventListener('resize', function () {
            myChart.resize()
          })
        })
      }
    },
    getPatientTags (id) {
      var _this = this
      this.$axios
        .get('/patient/tags', {
          params: {
            patientId: id
          }
        })
        .then(
          successResponse => {
            console.log(successResponse.data.data)
            for (let i = 0, length = successResponse.data.data.length; i < length; i++) {
              let cirItem = {
                value: 100,
                name: successResponse.data.data[i].content
              }
              _this.cirData.push(cirItem)
              _this.getCirData()
            }
          }
        )
        .catch(
          failResponse => {
            console.log(failResponse.msg)
          }
        )
    },
    getCirData () {
      const chart = this.$refs.treeChart
      if (chart) {
        const myChart = this.$echarts.init(chart)
        const option = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center'
          },
          series: [
            {
              name: '患病标签',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 40,
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: this.cirData
            }
          ]
        }
        myChart.setOption(option)
        window.addEventListener('resize', function () {
          myChart.resize()
        })
        this.$on('hook:destroyed', () => {
          window.removeEventListener('resize', function () {
            myChart.resize()
          })
        })
      }
    },
    emptyJump () {
      this.$router.push('/case/info')
    }
  }
}
</script>

<style scoped>
#text-graph {
  display: flex;
}

.text-empty-box {
  cursor: pointer;
}
</style>
